<template>
  <!-- 白色圆角背景板 -->
  <div class="cards">

    <!-- 活动商品内容 -->
    <p style="font-size: 18px; font-weight: 600; margin-top: 20px;">
      <font-awesome-icon :icon="['fas', 'bell']" style="margin-right: 10px;" />
      活动详情
      <el-icon>
        <ArrowRight />
      </el-icon>
    </p>

    <!-- 加载骨架 -->
    <el-skeleton style="margin-top: 50px;" v-if="loading && currentActivity.activity.status === 0" :rows="5" animated />
    <el-card class="activity-card" v-else>
      <div class="activity-card-body">
        <img src="../../assets/images/activity_2.png" alt="a-cart" style="height: 150px;" @dragstart.prevent />
        <div>
          <span class="activity-name">
            🛍️ {{ currentActivity.activity.activityName }}
          </span>
          <span class="activity-info">
            惊喜特惠，全场满
            <span class="activity-number">{{ currentActivity.activity.reach }}</span>
            元，立减
            <span class="activity-number">{{ currentActivity.activity.reduce }}</span>
            元
          </span>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'fire']" />
            活动商品类别：
            <el-tag v-for="item in currentCategoryList">
              {{ item.categoryName }}
            </el-tag>
          </div>
          <div class="activity-time">
            <font-awesome-icon :icon="['fas', 'circle-info']" />
            活动时间：
            {{ currentActivity.activity.startTime }}
            -
            {{ currentActivity.activity.endTime }}
          </div>
        </div>
        <img src="../../assets/images/activity.png" alt="a-cart" style="height: 150px;" @dragstart.prevent>
      </div>
    </el-card>

    <!-- 活动商品内容 -->
    <p style="font-size: 18px; font-weight: 600; margin-top: 30px;">
      <font-awesome-icon :icon="['fas', 'feather']" style="margin-right: 10px;" />
      活动商品
      <el-icon>
        <ArrowRight />
      </el-icon>
    </p>
    <el-row :gutter="20" class="commodity-list">

      <!-- 加载骨架 -->
      <el-skeleton style="margin: 50px 10px 0 10px;" v-if="loading && commodityList.length <= 0" :rows="5" animated />

      <el-col v-for="item in commodityList" :key="item.commodityId" :span="8" style="margin-top: 20px;">

        <!-- 单个卡片 -->
        <el-card :body-style="{ display: 'flex', padding: '0px' }" shadow="hover">
          <img :src="img_url_pre(item.pictures[0])" class="image" @dragstart.prevent />
          <div class="left-part">
            <!-- 商品名 -->
            <div>
              {{ item.commodityName }}
            </div>
            <!-- 商品价格 -->
            <div class="price">
              <span style="font-size: 20px;">￥{{ item.price.toFixed(2) }}</span>
              <el-tag effect="dark" type="warning" size="small">包邮</el-tag>
            </div>
            <!-- 销量 -->
            <div class="sales-volume">
              {{ item.salesVolume }}+人已付款
            </div>
            <!-- 进入商店按钮 -->
            <el-button icon="Opportunity" link class="button" @click="enterCommodity(item.commodityId)">查看商品详情
            </el-button>
          </div>
        </el-card>

      </el-col>

    </el-row>

    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
      @current-change="changePage" :page-size="config.size" />
  </div>
</template>


<script setup>
import { ref, onMounted, getCurrentInstance, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import img_url_pre from '../../utils/img_url_filter';

const router = useRouter();
const store = useStore();
const { proxy } = getCurrentInstance();
const config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})
const commodityList = ref([]);
const currentCategoryList = ref([]);
const loading = ref(false);

const currentActivity = reactive({
  activity: {
    "activityId": "",
    "activityName": "",
    "startTime": "",
    "endTime": "",
    "categoryIdList": [],
    "fund": 0,
    "reach": 0,
    "reduce": 0,
    "balance": 0,
    "registeredCapital": 0,
    "monthlySalesVolume": 0,
    "monthlySalesValue": 0,
    "status": 0
  }
});

/**
 * 获取商品
 */
const getActivityCommodity = async (activityId) => {
  let res = await proxy.$api.commodity.getActivityCommodity(activityId, { current: config.current, size: config.size });
  commodityList.value = res.data.commodityList;
  config.total = res.data.total
}

/**
 * 进入查看商品详情
 */
const enterCommodity = (commodityId) => {
  store.commit('commodity/updateCommodityId', commodityId);
  // 滚动到顶部
  if (store.state.MallMainScrollBarRef) {
    store.state.MallMainScrollBarRef.setScrollTop(0);
  }
  router.push('/mall/commodity')
}

/**
 * 获取活动详情
 */
const getActivityInfo = async (activityId) => {
  let ret = await proxy.$api.activity.getActivityInfo(activityId);
  currentActivity.activity = ret.data;
  await getCategories();
}

/**
 * 获取当前活动的所有商品类别
 */
const getCategories = async () => {
  for (let categoryId of currentActivity.activity.categoryIdList) {
    let ret = await proxy.$api.category.getCategory(categoryId);
    currentCategoryList.value.push(ret.data);
  }
}

/**
 * 翻页操作
 * @param {number} page 
 */
const changePage = async (page) => {
  config.current = page;
  getActivityCommodity(store.state.activity.activityId);
}

onMounted(async () => {
  loading.value = true;
  await getActivityInfo(store.state.activity.activityId);
  await getActivityCommodity(store.state.activity.activityId);
  loading.value = false;
})
</script>

<style lang="less" scoped>
/* 店铺卡片群 */
.cards {
  background-color: white;
  width: 73%;
  margin: 20px auto 10px auto;
  padding: 30px 40px 20px 40px;
  border-radius: 20px;

  p {
    margin-left: 30px;
    /* 让icon和文字在水平轴线上 */
    display: flex;
  }

  .activity-card {
    margin-top: 30px;

    .activity-card-body {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;

      .activity-name {
        font-size: 30px;
      }

      .category {
        margin-top: 30px;

        .el-tag {
          margin-left: 5px;
        }
      }

      .activity-info {
        margin-left: 30px;

        .activity-number {
          font-size: 23px;
          color: #2e64c2;
        }
      }

      .activity-time {
        margin-top: 30px;
        font-size: 12px;
        color: #A2A2A2;
      }
    }


  }

  .commodity-list {

    .el-card:hover {
      /* hover的时候产生阴影和变大 */
      transform: scale(1.015);
      box-shadow: 0 0 16px rgba(113, 138, 187, 0.523);
      border-color: #eee;
    }

    .el-card {
      border: 0;
      border-radius: 15px;
      background-color: #d3dae33a;
      padding-right: 11px;

      .image {
        width: 43%;
        height: 150px;
        margin: 14px 14px 14px 14px;
        border-radius: 6px;
      }

      .left-part {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .price {
          display: flex;

          .el-tag {
            margin-left: 5px;
          }
        }

        .sales-volume {
          font-size: 13px;
          color: #A2A2A2;
          margin-left: 5px;
        }

        .button {
          display: flex;
          width: 100px;
        }
      }
    }
  }

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>